<template>
  <div class="home">
    <Header />
    <div class="main-content">
      <BasicConfig />
      <FieldConfig />
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import BasicConfig from '@/components/BasicConfig.vue'
import FieldConfig from '@/components/FieldConfig.vue'
import Footer from '@/components/Footer.vue'

export default {
  name: 'Home',
  components: {
    Header,
    BasicConfig,
    FieldConfig,
    Footer
  }
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.main-content {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 20px;
  overflow-y: auto;
  min-height: 0;
  align-items: flex-start;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    flex-direction: column;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 16px;
    gap: 12px;
  }
}
</style>